<template>
	<view class="container">
		<uni-row>
			<uni-col class="headerCol">
				<view class="headerContent">
					<text class="headerContent_title">我的</text>
					<view class="headerContent_box">
						<view class="headerContent_userInfoShow">
							<view class="avar-img">
								<image :src="$IMG_URL+userInfo.avatar" />
							</view>
							<view class="headerContent_userInfoShow_info">
								<view class="headerContent_userInfoShow_info_text">{{userInfo.nickname}}
									<text style="font-size:24rpx;margin-left: 10rpx;">{{userInfo.mobile}}</text>
								</view>
								<view class="ji">
									积分 {{userInfo.score}}
								</view>
							</view>
						</view>
						<image @click="navigator('/pages/me/persionMsg/persionMsg')" class="right-img-1"
							src="/static/me/right-1.png" mode=""></image>
					</view>
				</view>
				<view class="firstView">
					<uni-grid :column="4" :show-border="false" :square="false">
						<uni-grid-item v-for="(item ,index) in firstFuList" :index="index" :key="index">
							<view class="firstView_grid-item-box" @click="navigator(item.url)">
								<image class="firstView_grid-item-box_image" :src="item.imgSrc" mode="aspectFill" />
								<text class="firstView_grid-item-box_text">{{item.title}}</text>
							</view>
						</uni-grid-item>
					</uni-grid>
				</view>

			</uni-col>
		</uni-row>
		<view class="secondView">
			<uni-grid :column="4" :show-border="false" :square="false">
				<uni-grid-item v-for="(item ,index) in secondFuList" :index="index" :key="index">
					<view class="secondView_grid-item-box" @click="navigator(item.url)">
						<image class="secondView_grid-item-box_image" :src="item.imgSrc" mode="aspectFill" />
						<text class="secondView_grid-item-box_text">{{item.title}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {},
				firstFuList: [{
					'title': '我的订单',
					'imgSrc': '/static/me/order-1.png',
					'url': '/pages/me/order/order'
				}, {
					'title': '我的结算',
					'imgSrc': '/static/me/order-2.png',
					'url': '/pages/me/settlement/settlement'
				}, {
					'title': '我的仓库',
					'imgSrc': '/static/me/order-3.png',
					'url': '/pages/me/warehouse/warehouse'
				}, {
					'title': '我的寄售',
					'imgSrc': '/static/me/order-4.png',
					'url': '/pages/me/sale/sale'
				}],
				secondFuList: [{
					'title': '收款管理',
					'imgSrc': '/static/me/order-5.png',
					'url': '/pages/me/collection/collection?title=收款管理'
				}, {
					'title': '优惠卷',
					'imgSrc': '/static/me/order-6.png',
					'url': '/pages/me/coupon/coupon'
				}, {
					'title': '邀请注册',
					'imgSrc': '/static/me/order-7.png',
					'url': '/pages/me/inviting/inviting'
				}, {
					'title': '我的收益',
					'imgSrc': '/static/me/order-8.png',
					'url': '/pages/me/income/income'
				}, {
					'title': '我的积分',
					'imgSrc': '/static/me/order-9.png',
					'url': '/pages/me/myIntegral/myIntegral'
				}, {
					'title': '积分订单',
					'imgSrc': '/static/me/order-10.png',
					'url': '/pages/me/integralOrder/integralOrder'
				}, {
					'title': '设置',
					'imgSrc': '/static/me/order-11.png',
					'url': '/pages/me/setting/setting'
				}]
			};
		},

		onShow() {
			this.init();
		},
		methods: {
			//用户信息
			init() {
				this.$http('user.getuserdetails', {}, '获取中...').then(res => {
					if (res.code == 1) {
						// console.log(res, 11)
						res.data.mobile = res.data.mobile.replace(/^(\d{3})\d{4}(\d{4})$/, `$1****$2`)
						this.userInfo = res.data
					}
				})
			},
			// 跳转
			navigator(url) {
				if(url == '/pages/me/settlement/settlement'){
					this.$http('other.getsystem', {}, '抢购中...').then(res => {
						if (res.code == 1) {
							 if(res.data.is_jisuan == 0){
								 uni.showToast({
								 	icon:'none',
									title:'结算暂未开启'
								 })
							 }else{
								 uni.navigateTo({
								 	url: url
								 })
							 }
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}
					})
				}else{
					uni.navigateTo({
						url: url
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F6F7F9;
	}

	.container {
		padding-bottom: 20rpx;
	}

	.headerCol {
		background-image: url('');
		background-repeat: no-repeat;
		background-position: 0px 0px;
		background-size: calc(100% + 0px);
	}

	.headerContent {
		height: 387rpx;
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		margin-top: 15rpx;
		padding-left: 36rpx;
		padding-right: 36rpx;
		position: relative;
		top: calc(15rpx + var(--status-bar-height));

		&_title {
			color: #fff;
			text-align: center;
			font-size: 36rpx;
		}


	}
	.headerContent_box{
		display: flex;
		justify-content: space-between;
	}
	.headerContent_userInfoShow {
		display: flex;
		margin-top: 34rpx;
		align-items: center;

		.avar-img {
			width: 150rpx;
			height: 150rpx;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
				border-radius: 50%;
			}
		}

		.headerContent_userInfoShow_info {
			margin-left: 24rpx;
			color: #fff;
			font-size: 32rpx;
			.ji {
				background: #FF7019;
				border-radius: 64rpx 64rpx 64rpx 64rpx;
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
				text-align: center;
				margin-top: 20rpx;
				line-height: 50rpx;

				text {
					font-weight: 400;
					margin-left: 20rpx;
				}
			}
		}
	}

	.right-img-1 {
		width: 20rpx;
		height: 25rpx;
		margin-top: 100rpx;
	}

	.firstView {
		background-color: #fff;
		border-radius: 20rpx;
		position: relative;
		margin-top: -80rpx;
		margin-left: 36rpx;
		margin-right: 36rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.10);

		&_grid-item-box {
			display: flex;
			flex-direction: column;
			align-items: center;

			&_image {
				width: 64rpx;
				height: 64rpx;
				margin-top: 48rpx;
			}

			&_text {
				color: #333;
				font-size: 24rpx;
				text-align: center;
				margin-top: 16rpx;
				margin-bottom: 48rpx;
			}
		}
	}

	.secondView {
		width: 702rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: 36rpx;
		box-shadow: 0rpx 0rpx 8rpx 0rpx rgba(0, 0, 0, 0.10);

		&_grid-item-box {
			display: flex;
			flex-direction: column;
			align-items: center;

			&_image {
				width: 64rpx;
				height: 64rpx;
				margin: 48rpx 36rpx 0 36rpx;
			}

			&_text {
				color: #333;
				font-size: 24rpx;
				text-align: center;
				margin-top: 16rpx;
				margin-bottom: 48rpx;
			}
		}
	}
</style>